=> CSS를 제대로 사용 하기 위하여 알아야 할것
=> CSS를 설명 하기에 앞서 HTML이 무엇을 의미하는지 정확히 파악해야 한다.
p.text,
div.search,
span.name {
color: #3333;
}
h1 {
font-weight: bold ;
font-size: 3em;
margin: 1.5em 0 1em;
padding: 0 0 0 8px
}
<!-- 1. 외부 선언(extenal css)-->
<!-- 우선순위가 가장 낮다 -->
<link rel="stylesheet" type="text/css" href="myCss.css" />
<!-- 2. 엘리먼트에 직접 선어 -->
<div style="padding: 10px; border: 1px solid #eee;">
<p>contents</p>
</div>
참고사항
| selector | 표시방법 | 범위 |
|---|---|---|
| 공용 selector | 모든 태그를 지정 | |
| 타입 selector | A | 태그 A를 지정 |
| 클래스 selector | .A | 클래스가 A인 태그를 지정 |
| ID selector | #A | 아이이닥 A인 태그를 지정 |
* {
margine: 0;
padding: 0;
}
// 이와 같이 지정할 경우 페이지 내의 모든 <h1>...<h5> <p>,<form> 등의
// 브라우져 기본 마진과 패딩을 갖고 있는 모든 엘리먼트 의 여백이 없어 진다.
div.search * {
vertical-align: middle
}
//div.search안의 모든 엘리먼트 의 여백이 없어진다.
| selector | 표시방법 | 범위 |
|---|---|---|
| 하위 selector | A B | 태그 A로 감사져 있는 B를 지정 |
| 인접 selector | A > B | 태그 A로 감사져 있는 태그 B중 한단계 밑에 것을 지정 |
| 자식 selector | A + B | 태그 A와 B가 연속적으로 나와 있는것을 지정 |
| selector | 표시방법 | 범위 |
|---|---|---|
| first-child selector | A:first-child | 태그 A로 감사져 있는 가장 처음 태그를 지정 |
| 언어 selector | A:lang(B) | 태그A중 언어가 B로 설정되어 있는 것을 지정 |
| 링크 selector | A:link | 태그 A중 링크가 걸려있으면 지정 |
| A:visited | 태그 A중 링크가 결렸고 사용자가 이미 클릭한 태그를 지정 | |
| 동적 selector | A:active | 태그 A중 사용자가 마우스 를 누르고 있는 태그를 지정 |
| A:hover | 태그 A중 사용자가 마우스 포인터 위에 올려 놓은 태그를 지정 | |
| A:focus | 태그 A중 사용자가 키보드 입력을 받는 태그를 지정 |
input:hover,
input:focus {
bacjground: #ffe;
}
참고사항
| selector | 표시방법 | 범위 |
|---|---|---|
| first-line selector | A:first-line | 태그 A 문단중 첫번째 줄을 지정 |
| first-letter selector | A:first-letter | 태그 A의 문단중 첫번째 글자 지정 |
| :before selector | A:before | 태그 A의 문단 앞을 지정 |
| :after selector | A:after | 태그 A의 문단 뒤를 지정 |
tr:hover td {
background: #eee
}
// 이렇게 하면 마우스가 올라갔을때 배경색이 바뀐다.
p:first-letter {
float: left;
font-weight: bold;
font-size: 3.5em;
}
// 이렇게 하면 p태그에 속한 첫번째 글자가 크게 나온다.
// 원한는 글자르 span 태그 없이 CSS 만으로 강조 할수 있다.
=> 레이아웃을 만들어 가는 과정을 살펴보자
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=euc-kr">
<!-- table을 이용할경우 markup영역이 좌측에 위치할건지 우측에 위치할 것인지 이미 결정되어지게 되지만 -->
<!-- CSS를 이용한 레이아웃 에서는 markup에 이러한 디자인 정보가 없기에 단순하게 위에서 아래로 나열된다. -->
<title>default css Layout</title>
</head>
<body>
<div id="head">Site Top Area</div>
<hr>
<div id="sub">Site left Area</div>
<hr>
<div id="body">Site Main Content Area</div>
<hr>
<div id="foot">Site Bottom Area</div>
</body>
</html>
<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
<!-- 화면 가장자리 여백을 없애기 위한 위와 같은 방법은 사양 되야 한다. 다음 과 같이 처리 하라. -->
body {
margin:0;
padding:0;
}
<!-- 다음으로 hr 디자인이 화면에서 없어져야 하기때문에 다음과 같이 처리 하라 -->
hr {
display:none;
}
<!-- Site Top Area 와 같은 경우는 고정된 높이를 가지는 경우가 대부분 이므로 다음과 같이 높이와 배경색만 지정한다 -->
#head {
height: 170px
background: #eee;
}
<!-- Site Left Area 는 사이트 좌측의 네비게이션등이 들어가고 고정적이며 컨텐츠 좌측에 항상들어 가므로 absolute position을 지정한다.-->
#sub {
position: absolute;
top: 170px
left: 0;
width: 160px;
}
<!-- 여기까지 적용할 경우 absolute position의 경우 화면에서 위치를 차지 하지 않기 ?문에 영역간에 겹침이 발생 하므로 다음을 적용한다.-->
#body {
padding-left: 170px;
width: 700px;
background: url("http://www.ysvol.or.kr/programs/user/images/board/board_tb_vline.gif") repeat-y 170px 0;
min-height: 400px;
}
<!-- 페이지 하단에 높이와 background 색상을 적용해 준다 -->
#foot {
height: 30px;
background: #eee;
}
추가사항
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=euc-kr">
<title>default css Layout</title>
<style type="text/css" >
ul {
margin: 0;
padding: 0;
list-style: none;
}
li.li2 {
background: url("http://www.ysvol.or.kr/programs/user/images/board/board_tb_vline.gif") repeat 0 0.25em;
padding-left: 15px
}
</style>
</head>
<body>
<h2>스타일을 적용하지 않은 경우</h1>
<ul>
<li>list item1</li>
<li>list item2</li>
<li>list item3</li>
</ul>
<h2>스타일을 적용한 경우</h1>
<ul>
<li class="li2">list item1</li>
<li class="li2">list item2</li>
<li class="li2">list item3</li>
</ul>
</body>
</html>
=> 이건 각자 책을 보고 테스트 하세요